<template>
  <!-- 编辑弹出框 -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%" top="5vh">
    <el-form ref="dataForm" :model="dataForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="ID">
            <el-input v-model="dataForm.id" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分类">
            <el-select v-model="dataForm.family_id" placeholder="选择分类">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原价">
            <el-input v-model="dataForm.price" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现价">
            <el-input v-model="dataForm.nowprice" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品名">
            <el-input v-model="dataForm.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠">
            <el-input v-model="dataForm.discount"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="商品标题">
        <el-input v-model="dataForm.detail" type="textarea" :rows="2"></el-input>
      </el-form-item>


      <el-row>
        <el-col :span="6">
          <el-form-item label="标签1">
            <el-input v-model="dataForm.labelone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签2">
            <el-input v-model="dataForm.labeltwo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="版本">
            <el-input v-model="dataForm.version"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="大小">
            <el-input v-model="dataForm.playsize"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司">
            <el-input v-model="dataForm.company"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商">
            <el-input v-model="dataForm.provider"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="最近更新">
            <!-- <el-input v-model="dataForm.playtime"></el-input> -->
            <el-date-picker v-model="dataForm.playtime" type="date" format="yyyy-MM-dd" placeholder="选择日期时间"
              value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="需要网络">
            <!-- <el-input v-model="dataForm.internet"></el-input> -->
            <el-input v-model="dataForm.internet"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品图标">
            <upload-single-image :value.sync="dataForm.pic"></upload-single-image>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="顶部图">
            <upload-single-image :value.sync="dataForm.picture"></upload-single-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import * as ProductAPI from '@/api/product.js';
  import Editor from '@/components/Tinymce/index.vue'; //导入封装后的富文本组件
  import UploadSingleImage from '@/components/Upload/UploadSingleImage';
  let dayjs = require('dayjs');
  export default {
    name: 'productEdit',
    components: {
      editor: Editor ,//注册富文本组件
      UploadSingleImage //注册单图片上传组件
    },
    props: {
      category_id: {
        type: Number,
        default: 0
      },
      categoryList: Array //分类选项数据
    },
    data() {
      return {
        dialogVisible: false,
        dataForm: {
          id: 0
        },
        //数据校验规则，后续继续完善
        rules: {}
      };
    },
    computed: {
      //弹框标题
      dialogTitle() {
        return !this.dataForm.id ? '新增' : '编辑';
      }
    },

    methods: {
      //加上BaseAPI生成图片完整Url
      fullUrl(img) {
        return `${this.BaseAPI}${img}`;
      },
      init(id) {
        this.dataForm.id = id || 0;
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields();
          if (id) {
            //是编辑
            ProductAPI.getDetailById(id).then(result => {
              this.dataForm = result.data; //看接口文档，知道data是对应的商品对象
              this.dataForm.playtime = dayjs(this.dataForm.playtime).format('YYYY-MM-DD');
              delete this.dataForm.picList; //删除多余字段；为什么？看API接口
              delete this.dataForm.family; //删除多余字段；为什么？看API接口
            });
          } else {
            //是新增
            this.setDataFormToDefault(); //Props传递的参数
          }
        });
      },

      // 确认提交
      handleSubmit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            ProductAPI.updateProduct(this.dataForm)
              .then(() => {
                this.$message.success(`保存成功`);
                this.dialogVisible = false;
                this.$emit('refreshDataList'); //重新刷新列表数据
              })
              .catch(error => {});
          }
        });
      },

      setDataFormToDefault() {
        //初始默认值
        let defaultForm = {};
        defaultForm.id = 0;
        defaultForm.family_id = this.category_id; //Props传递的参数
        defaultForm.title = '';
        defaultForm.price = 0;
        defaultForm.nowprice = '';
        defaultForm.discount = '';
        defaultForm.labelone = '';
        defaultForm.labeltwo = '';
        defaultForm.version = '';
        defaultForm.detail = '';
        defaultForm.playtime = '';
        defaultForm.company = '';
        defaultForm.provider = '';
        defaultForm.playsize = '';
        defaultForm.internet = '';
        defaultForm.pic = '';
        defaultForm.picture = '';

        this.dataForm = Object.assign({}, defaultForm);
      }
    }
  };
</script>

<style scoped></style>
